<template>
  <div class="all">
      <div class="add-nav">
        <el-radio-group v-model="select" >
        <el-radio-button :label="true">服务器列表</el-radio-button>
        <el-radio-button :label="false">添加服务器</el-radio-button>
        </el-radio-group>
<!--        <ul>
          <li @click="select='list'"><el-radio-button type="primary" plain>服务器列表</el-radio-button></li>
          <li @click="select='add'" ><el-radio-button type="primary" plain>添加服务器</el-button></li>
        </ul> -->
      </div>
      <!-- 服务器列表 -->
      <div class="add-list" v-show="select">
        <table width="100%" cellspacing='0'>
          <thead>
            <tr>
              <th style="width: 16%;"> 服务器名称 </th>
              <th style="width: 16%;"> 访问域名或IP </th>
              <th style="width: 16%;">服务器类别</th>
              <th style="width: 16%;">状态</th>
              <th style="width: 16%;">添加时间</th>
              <th style="width: 16%;">管理操作</th>
            </tr>
            </thead>
            <tbody>
              <tr v-for="(val,index) in items">
                <td style="width: 16%;">{{val.name}}</td>
                <td style="width: 16%;">{{val.ip}}</td>
                <td v-if="val.isDefault==1" style="width: 16%;">默认</td>
                <td v-else style="width: 16%;">非默认</td>
                <td v-if="val.status==1" style="width: 16%;">正常</td>
                <td v-else style="width: 16%;">故障</td>
                <td style="width: 16%;">{{val.addTime}}</td>
                <td style="width: 16%;"><i v-on:click="msgshop(val)">修改</i>  |  <i>删除</i></td>
              </tr>
            </tbody>
        </table>

      </div>
      <!-- 添加服务器-->
      <div class="add-Add" v-show="!select">

          <table width="100%" cellspacing="0">
            <tr>
              <td class="Add-ming">服务器名称</td>
              <td class="Add-ming1"> <input type="text" v-model="New.newName"><font color="gray">请输入服务器名称</font></td>
            </tr>
            <tr>
              <td class="Add-ming">访问域名或IP</td>
              <td class="Add-ming1"><input type="text" v-model="New.newIp"><font color="gray">请输入访问域名或IP</font></td>
            </tr>
            <tr>
              <td class="Add-ming">是否默认</td>
              <td class="Add-ming1">        <input type="radio" value="1" v-model="New.isDefault">
                          <label for="New.isDefault">是</label>
                          <input type="radio" value="0" v-model="New.isDefault">
                          <label for="New.isDefault">否</label></td>
            </tr>
          </table>


         <button >提交</button>

      </div>
      <!-- 修改服务器 -->
<div class="pop-up" v-show="shop===1">
  <h3>修改-{{mod.name}}</h3>
  <div class="pop-1">
    <table width="100%" cellspacing="0">
      <tbody>
        <tr>
          <td class="Add-ming" width="120px">  服务器名称：</td>
          <td class="Add-ming1"><input type="text" value="mod.ModName" v-model="mod.name"></td>
        </tr>
        <tr>
          <td class="Add-ming">访问域名或IP：</td>
          <td class="Add-ming1"><input type="text" value="mod.ModIp" v-model="mod.IP"></td>
        </tr>
        <tr>
          <td class="Add-ming">是否默认</td>
          <td class="Add-ming1"><input type="radio" value="1" v-model="mod.isDefault">
                 <label for="mod.isDefault">是</label>
                 <input type="radio" value="0" v-model="mod.isDefault">
                 <label for="mod.isDefault">否</label></td>
        </tr>
      </tbody>
    </table>
  </div>
      <div class="pop-2">
        <button>确定</button>
        <button @click="msgPass()">取消</button>
      </div>

</div>
    </div>
</template>

<script>
  export default{
    data () {
      return{
        items:[

        ],
        New:{
          newName:'',
          newIp:''
        },
        mod:'',
        select:true,
        shop:'',
        quantity:'',

      }
      },
        methods:{
          msgshop:function(e){
            this.mod=e
            this.shop=1
            console.log(this.mod)
          },
          msgPass:function(){
            this.shop=""
             this.mod=''
          },
          Postdata(e){
            var _this=this
          this.$axios({
            method: "POST",
                url: '/api/'+e,
                data: {
                      adminName:_this.$cookies.get('adminName'),
                      token:_this.$cookies.get('token'),
            },
            headers: {'Content-Type': 'application/json'}
          }).then(function(response){
            console.log(response)
            if(response.data.data){
              _this.items=response.data.data
            }else{

            }


           })
           .catch(function(error){
             console.log(error)
           })
          }
          },
          mounted() {
            this.Postdata('admin/server/getAll')
          }
      }
</script>
<style lang="scss" scoped src = "../../css/Addadmin.css">

</style>
<style scoped>
  font{
    font-size: 12px;
  }
  .el-button{
    margin-left: 15px;
  }
  td{
    padding: 8px 0 0 8px;
  }
</style>
